<template>
<div class="app-container">
 
 
  <el-table
    :data="coursePlan"
    style="width: 100%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="courseWeek"
      label="星期"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="courseTime"
      label="时间"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="courseName"
      label="课程名"
      align="center">
    </el-table-column>
    <el-table-column
      prop="classGrade"
      label="年级"
      align="center">
    </el-table-column>
    <el-table-column
      prop="roomAddr"
      label="上课地点"
      align="center">
    </el-table-column>
  </el-table>
<el-calendar v-model="value">
</el-calendar>
</div>


</template>



<script>
import course from "@/api/course/course";
export default {
  //2、写核心代码位置
  //data两种写法：
  // data:{
  // },

  data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        value: new Date(),
        coursePlan:[]
      }
    },
    created(){
        this.findCoursePlan()
    },
  methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

      findCoursePlan(){
        course.findCoursePlan()
          .then(response => {
          this.coursePlan = response.data.coursePlan;
          console.log(this.coursePlan)
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败
      }

    }
    
};
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>